﻿<!--
//////////////////////////////////////////////////////////////////////////////////
//
JSDraw
// Copyright (C) 2014 Scilligence Corporation
// http://www.scilligence.com/
//
//////////////////////////////////////////////////////////////////////////////////
-->

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>JSDraw - A Javascript Chemical Structure Editor/Viewer</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js" type="text/javascript"></script>
<script type="text/javascript" src='Scilligence.JSDraw2.Pro.js'></script>


</head>
<body>

<h2>JSDraw - A Javascript Chemical Structure Editor/Viewer</h2>

<table border=1><tr><td>
Editor:<br />
<div class='JSDraw' id="test" skin="w8" style="width: 660px; height: 300px;border:1px solid gray" ondatachange='molchange'
    dataformat='molfile' data='
ChemJSDraw11140919362D

  6  6  0  0  0  0  0  0  0  0  1 V2000
    3.5115   -9.3600    0.0000 C   0  0
    2.1605   -8.5800    0.0000 C   0  0
    2.1605   -7.0200    0.0000 C   0  0
    3.5115   -6.2400    0.0000 N   0  0
    4.8625   -7.0200    0.0000 C   0  0
    4.8625   -8.5800    0.0000 C   0  0
  1  2  1  0
  2  3  2  0
  3  4  1  0
  4  5  2  0
  5  6  1  0
  6  1  2  0
M  END'></div>
</td><td>
Viewer with popup (double-click to edit):<br />
<div class='JSDraw' id="div1" style="width: 330px; height: 330px;border:1px solid gray" viewonly popup dataformat='molfile' data='
ChemJSDraw11250914282D

 11 12  0  0  0  0  0  0  0  0  1 V2000
   15.6000   -9.3600    0.0000 N   0  0
   14.2490   -8.5800    0.0000 C   0  0
   14.2490   -7.0200    0.0000 C   0  0
   15.6000   -6.2400    0.0000 C   0  0
   16.9510   -7.0200    0.0000 C   0  0
   16.9510   -8.5800    0.0000 C   0  0
   18.3020   -6.2400    0.0000 O   0  0
   12.8980   -9.3600    0.0000 C   0  0
   11.5470   -8.5800    0.0000 C   0  0
   11.5470   -7.0200    0.0000 C   0  0
   12.8980   -6.2400    0.0000 C   0  0
  1  2  1  0
  2  3  2  0
  3  4  1  0
  4  5  2  0
  5  6  1  0
  6  1  2  0
  5  7  1  0
  8  2  1  0
  8  9  2  0
  9 10  1  0
 10 11  2  0
 11  3  1  0
M  END'></div>
</td></tr></table>
<button onclick='alert(JSDraw.get("test").getMolfile())'>Get Molfile</button>
<button onclick='alert(JSDraw.get("test").getMolfile(true))'>Get Molfile V3000</button>
<button onclick='alert(JSDraw.get("test").getRxnfile())'>Get Rxnfile</button>
<button onclick='alert(JSDraw.get("test").getSmiles())'>Get Smiles</button>
<button onclick='alert(JSDraw.get("test").getHtml())'>Get Html</button>
<button onclick='JSDraw.get("div1").setHtml(JSDraw.get("test").getHtml())'>Copy Editor to Viewer</button>
<button onclick='JSDraw.get("test").sss(JSDraw.get("div1"))'>Substructure Search</button>
<br />
Mol. Weight: <label id='mw' style='width:120px;font-weight:bold'></label>
Formula: <label id='formula' style='width:300px;font-weight:bold'></label>

<script type="text/javascript">
    JSDraw.init();
    
    function molchange(jsdraw) {
        document.getElementById('formula').innerHTML = jsdraw.getFormula(true);
        document.getElementById('mw').innerHTML = jsdraw.getMolWeight();
    }
</script>

<br /><br />
And also check SDF <a href='SDFList.htm'>List</a> and <a href='SDFGrid.htm'>Grid</a> Viewer using JsDraw.



<br />
<br />
<hr />
Copyright (C) 2014 Scilligence Corporation (<a href='http://www.scilligence.com/'>http://www.scilligence.com/</a>)
<br />
<br />
<b>License:</b>
<ul>
<li>Free for education (<a href='http://www.scilligence.com/web/download.aspx?prod=JSDraw'>Download</a>)</li>
<li>Please <a href='http://www.scilligence.com/web/contact.aspx'>contact us</a> for commercial licenses</li>
</ul>    

</body>
</html>
